
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Awesome go-echarts</title>
    <script src="http://127.0.0.1:8083/assets/echarts.min.js"></script>
    <script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
    <link href="http://127.0.0.1:8083/assets/bulma.min.css" rel="stylesheet">
    <link href="https://go-echarts.github.io/go-echarts-assets/assets/bulma.min.css" rel="stylesheet">
</head>

<body>
<div class="select" style="margin-right:10px; margin-top:10px; position:fixed; right:10px;">
    <select onchange="window.location.href=this.options[this.selectedIndex].value">
        <option value="http://127.0.0.1:8080/radar">Radar-(雷达图)</option>
        <option value="http://127.0.0.1:8080/bar3D">Bar3D-(3D 柱状图)</option>
        <option value="http://127.0.0.1:8080/boxPlot">BoxPlot-(箱线图)</option>
        <option value="http://127.0.0.1:8080/effectScatter">EffectScatter-(动态散点图)</option>
        <option value="http://127.0.0.1:8080/funnel">Funnel-(漏斗图)</option>
        <option value="http://127.0.0.1:8080/gauge">Gauge-仪表盘</option>
        <option value="http://127.0.0.1:8080/geo">Geo-地理坐标系</option>
        <option value="http://127.0.0.1:8080/graph">Graph-关系图</option>
        <option value="http://127.0.0.1:8080/heatMap">HeatMap-热力图</option>
        <option value="http://127.0.0.1:8080/kline">Kline-K 线图</option>
        <option value="http://127.0.0.1:8080/line">Line-(折线图)</option>
        <option value="http://127.0.0.1:8080/line3D">Line3D-(3D 折线图)</option>
        <option value="http://127.0.0.1:8080/liquid">Liquid-(水球图)</option>
        <option value="http://127.0.0.1:8080/map">Map-(地图)</option>
        <option value="http://127.0.0.1:8080/overlap">Overlap-(重叠图)</option>
        <option value="http://127.0.0.1:8080/parallel">Parallel-(平行坐标系)</option>
        <option value="http://127.0.0.1:8080/pie">Pie-(饼图)</option>
        <option value="http://127.0.0.1:8080/bar">Bar-(柱状图)</option>
        <option value="http://127.0.0.1:8080/sankey">Sankey-(桑基图)</option>
        <option value="http://127.0.0.1:8080/scatter">Scatter-(散点图)</option>
        <option value="http://127.0.0.1:8080/scatter3D">Scatter-(3D 散点图)</option>
        <option value="http://127.0.0.1:8080/surface3D">Surface3D-(3D 曲面图)</option>
        <option value="http://127.0.0.1:8080/themeRiver">ThemeRiver-(主题河流图)</option>
        <option value="http://127.0.0.1:8080/wordCloud">WordCloud-(词云图)</option>
        <option value="http://127.0.0.1:8080/page">Page-(顺序多图)</option>
    </select></div>

    
<div class="container">
    <div class="item" id="ECoRPtVaaObt"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_ECoRPtVaaObt = echarts.init(document.getElementById('ECoRPtVaaObt'), "white");
    let option_ECoRPtVaaObt = {
        title: {"text":"Radar-示例图",},
        tooltip: {},
        legend: {"data":["北京"],},
        radar: {"indicator":[{"name":"AQI","max":300},{"name":"PM2.5","max":250},{"name":"PM10","max":300},{"name":"CO","max":5},{"name":"NO2","max":200},{"name":"SO2","max":100}],"splitArea":{"show":true,},"splitLine":{"show":true,}},
        series: [
        {"name":"北京","type":"radar","data":[[55,9,56,0.46,18,6,1],[25,11,21,0.65,34,9,2],[56,7,63,0.3,14,5,3],[33,7,29,0.33,16,6,4],[42,24,44,0.76,40,16,5],[82,58,90,1.77,68,33,6],[74,49,77,1.46,48,27,7],[78,55,80,1.29,59,29,8],[267,216,280,4.8,108,64,9],[185,127,216,2.52,61,27,10],[39,19,38,0.57,31,15,11],[41,11,40,0.43,21,7,12],[64,38,74,1.04,46,22,13],[108,79,120,1.7,75,41,14],[108,63,116,1.48,44,26,15],[33,6,29,0.34,13,5,16],[94,66,110,1.54,62,31,17],[186,142,192,3.88,93,79,18],[57,31,54,0.96,32,14,19],[22,8,17,0.48,23,10,20],[39,15,36,0.61,29,13,21]],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_ECoRPtVaaObt.setOption(option_ECoRPtVaaObt);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="RhaPpMXzTpcR"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_RhaPpMXzTpcR = echarts.init(document.getElementById('RhaPpMXzTpcR'), "white");
    let option_RhaPpMXzTpcR = {
        title: {"text":"Radar-不同风格","textStyle":{"color":"#eee"},"right":"center"},
        tooltip: {},
        legend: {"bottom":"5px","data":["北京"],"textStyle":{"color":"#eee"}},
        radar: {"indicator":[{"name":"AQI","max":300},{"name":"PM2.5","max":250},{"name":"PM10","max":300},{"name":"CO","max":5},{"name":"NO2","max":200},{"name":"SO2","max":100}],"shape":"circle","splitNumber":5,"splitArea":{"show":false,},"splitLine":{"show":true,"lineStyle":{"opacity":0.1}}},
        series: [
        {"name":"北京","type":"radar","data":[[55,9,56,0.46,18,6,1],[25,11,21,0.65,34,9,2],[56,7,63,0.3,14,5,3],[33,7,29,0.33,16,6,4],[42,24,44,0.76,40,16,5],[82,58,90,1.77,68,33,6],[74,49,77,1.46,48,27,7],[78,55,80,1.29,59,29,8],[267,216,280,4.8,108,64,9],[185,127,216,2.52,61,27,10],[39,19,38,0.57,31,15,11],[41,11,40,0.43,21,7,12],[64,38,74,1.04,46,22,13],[108,79,120,1.7,75,41,14],[108,63,116,1.48,44,26,15],[33,6,29,0.34,13,5,16],[94,66,110,1.54,62,31,17],[186,142,192,3.88,93,79,18],[57,31,54,0.96,32,14,19],[22,8,17,0.48,23,10,20],[39,15,36,0.61,29,13,21]],"itemStyle":{"color":"#F9713C"},"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},"lineStyle":{"width":1,"opacity":0.5},"areaStyle":{"opacity":0.1},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
        backgroundColor: "#161627"
    };
    myChart_RhaPpMXzTpcR.setOption(option_RhaPpMXzTpcR);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="AdxrpRRNGASN"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_AdxrpRRNGASN = echarts.init(document.getElementById('AdxrpRRNGASN'), "white");
    let option_AdxrpRRNGASN = {
        title: {"text":"Radar-Legend(多例模式)","textStyle":{"color":"#eee"},"right":"center"},
        tooltip: {},
        legend: {"bottom":"5px","data":["北京","广州","上海"],"textStyle":{"color":"#eee"}},
        radar: {"indicator":[{"name":"AQI","max":300},{"name":"PM2.5","max":250},{"name":"PM10","max":300},{"name":"CO","max":5},{"name":"NO2","max":200},{"name":"SO2","max":100}],"shape":"circle","splitNumber":5,"splitArea":{"show":false,},"splitLine":{"show":true,"lineStyle":{"opacity":0.1}}},
        series: [
        {"name":"北京","type":"radar","data":[[55,9,56,0.46,18,6,1],[25,11,21,0.65,34,9,2],[56,7,63,0.3,14,5,3],[33,7,29,0.33,16,6,4],[42,24,44,0.76,40,16,5],[82,58,90,1.77,68,33,6],[74,49,77,1.46,48,27,7],[78,55,80,1.29,59,29,8],[267,216,280,4.8,108,64,9],[185,127,216,2.52,61,27,10],[39,19,38,0.57,31,15,11],[41,11,40,0.43,21,7,12],[64,38,74,1.04,46,22,13],[108,79,120,1.7,75,41,14],[108,63,116,1.48,44,26,15],[33,6,29,0.34,13,5,16],[94,66,110,1.54,62,31,17],[186,142,192,3.88,93,79,18],[57,31,54,0.96,32,14,19],[22,8,17,0.48,23,10,20],[39,15,36,0.61,29,13,21]],"itemStyle":{"color":"#F9713C"},"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},"lineStyle":{"width":1,"opacity":0.5},"areaStyle":{"opacity":0.1},},
        {"name":"广州","type":"radar","data":[[26,37,27,1.163,27,13,1],[85,62,71,1.195,60,8,2],[78,38,74,1.363,37,7,3],[21,21,36,0.634,40,9,4],[41,42,46,0.915,81,13,5],[56,52,69,1.067,92,16,6],[64,30,28,0.924,51,2,7],[55,48,74,1.236,75,26,8],[76,85,113,1.237,114,27,9],[91,81,104,1.041,56,40,10],[84,39,60,0.964,25,11,11],[64,51,101,0.862,58,23,12],[70,69,120,1.198,65,36,13],[77,105,178,2.549,64,16,14],[109,68,87,0.996,74,29,15],[73,68,97,0.905,51,34,16],[54,27,47,0.592,53,12,17],[51,61,97,0.811,65,19,18],[91,71,121,1.374,43,18,19],[73,102,182,2.787,44,19,20],[73,50,76,0.717,31,20,21]],"itemStyle":{"color":"#B3E4A1"},"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},"lineStyle":{"width":1,"opacity":0.5},"areaStyle":{"opacity":0.1},},
        {"name":"上海","type":"radar","data":[[91,45,125,0.82,34,23,1],[65,27,78,0.86,45,29,2],[83,60,84,1.09,73,27,3],[109,81,121,1.28,68,51,4],[106,77,114,1.07,55,51,5],[109,81,121,1.28,68,51,6],[106,77,114,1.07,55,51,7],[89,65,78,0.86,51,26,8],[53,33,47,0.64,50,17,9],[80,55,80,1.01,75,24,10],[117,81,124,1.03,45,24,11],[99,71,142,1.1,62,42,12],[95,69,130,1.28,74,50,13],[116,87,131,1.47,84,40,14],[108,80,121,1.3,85,37,15],[134,83,167,1.16,57,43,16],[79,43,107,1.05,59,37,17],[71,46,89,0.86,64,25,18],[97,71,113,1.17,88,31,19],[84,57,91,0.85,55,31,20],[87,63,101,0.9,56,41,21]],"itemStyle":{"color":"rgb(238, 197, 102)"},"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},"lineStyle":{"width":1,"opacity":0.5},"areaStyle":{"opacity":0.1},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
        backgroundColor: "#161627"
    };
    myChart_AdxrpRRNGASN.setOption(option_AdxrpRRNGASN);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="zhjiQBSULUHZ"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_zhjiQBSULUHZ = echarts.init(document.getElementById('zhjiQBSULUHZ'), "white");
    let option_zhjiQBSULUHZ = {
        title: {"text":"Radar-Legend(单例模式)","textStyle":{"color":"#eee"},"right":"center"},
        tooltip: {},
        legend: {"bottom":"5px","data":["北京","广州","上海"],"selectedMode":"single","textStyle":{"color":"#eee"}},
        radar: {"indicator":[{"name":"AQI","max":300},{"name":"PM2.5","max":250},{"name":"PM10","max":300},{"name":"CO","max":5},{"name":"NO2","max":200},{"name":"SO2","max":100}],"shape":"circle","splitNumber":5,"splitArea":{"show":false,},"splitLine":{"show":true,"lineStyle":{"opacity":0.1}}},
        series: [
        {"name":"北京","type":"radar","data":[[55,9,56,0.46,18,6,1],[25,11,21,0.65,34,9,2],[56,7,63,0.3,14,5,3],[33,7,29,0.33,16,6,4],[42,24,44,0.76,40,16,5],[82,58,90,1.77,68,33,6],[74,49,77,1.46,48,27,7],[78,55,80,1.29,59,29,8],[267,216,280,4.8,108,64,9],[185,127,216,2.52,61,27,10],[39,19,38,0.57,31,15,11],[41,11,40,0.43,21,7,12],[64,38,74,1.04,46,22,13],[108,79,120,1.7,75,41,14],[108,63,116,1.48,44,26,15],[33,6,29,0.34,13,5,16],[94,66,110,1.54,62,31,17],[186,142,192,3.88,93,79,18],[57,31,54,0.96,32,14,19],[22,8,17,0.48,23,10,20],[39,15,36,0.61,29,13,21]],"itemStyle":{"color":"#F9713C"},"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},"lineStyle":{"width":1,"opacity":0.5},"areaStyle":{"opacity":0.1},},
        {"name":"广州","type":"radar","data":[[26,37,27,1.163,27,13,1],[85,62,71,1.195,60,8,2],[78,38,74,1.363,37,7,3],[21,21,36,0.634,40,9,4],[41,42,46,0.915,81,13,5],[56,52,69,1.067,92,16,6],[64,30,28,0.924,51,2,7],[55,48,74,1.236,75,26,8],[76,85,113,1.237,114,27,9],[91,81,104,1.041,56,40,10],[84,39,60,0.964,25,11,11],[64,51,101,0.862,58,23,12],[70,69,120,1.198,65,36,13],[77,105,178,2.549,64,16,14],[109,68,87,0.996,74,29,15],[73,68,97,0.905,51,34,16],[54,27,47,0.592,53,12,17],[51,61,97,0.811,65,19,18],[91,71,121,1.374,43,18,19],[73,102,182,2.787,44,19,20],[73,50,76,0.717,31,20,21]],"itemStyle":{"color":"#B3E4A1"},"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},"lineStyle":{"width":1,"opacity":0.5},"areaStyle":{"opacity":0.1},},
        {"name":"上海","type":"radar","data":[[91,45,125,0.82,34,23,1],[65,27,78,0.86,45,29,2],[83,60,84,1.09,73,27,3],[109,81,121,1.28,68,51,4],[106,77,114,1.07,55,51,5],[109,81,121,1.28,68,51,6],[106,77,114,1.07,55,51,7],[89,65,78,0.86,51,26,8],[53,33,47,0.64,50,17,9],[80,55,80,1.01,75,24,10],[117,81,124,1.03,45,24,11],[99,71,142,1.1,62,42,12],[95,69,130,1.28,74,50,13],[116,87,131,1.47,84,40,14],[108,80,121,1.3,85,37,15],[134,83,167,1.16,57,43,16],[79,43,107,1.05,59,37,17],[71,46,89,0.86,64,25,18],[97,71,113,1.17,88,31,19],[84,57,91,0.85,55,31,20],[87,63,101,0.9,56,41,21]],"itemStyle":{"color":"rgb(238, 197, 102)"},"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},"lineStyle":{"width":1,"opacity":0.5},"areaStyle":{"opacity":0.1},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
        backgroundColor: "#161627"
    };
    myChart_zhjiQBSULUHZ.setOption(option_zhjiQBSULUHZ);
</script>

    <br/>
<style>
    .container {display: flex;justify-content: center;align-items: center;}
    .item {margin: auto;}
</style>
</body>
</html>
